import { PageContainer, RouteContext } from '@ant-design/pro-layout';
import moment from 'moment';
import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons';
import { Button, Card, Descriptions, Divider, Modal } from 'antd';
import type { FC } from 'react';
import React, { Fragment } from 'react';
import { useModel, useRequest, history } from 'umi';
import styles from './style.less';
import { selectByIdUsingGET } from '@/services/api/Post';
import { insertUsingPOST } from '@/services/api/Employ';

const PostDetail: FC = (props: any) => {
  const loginPath = '/user/login';
  const accountPath = '/accountsettings';
  const postId: number = props.location.query.id;

  // 获取用户登录情况
  const { initialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  // 查询岗位信息
  const { data, loading } = useRequest(() => {
    return selectByIdUsingGET({ id: postId });
  });

  // 投递简历
  const onSend = async () => {
    // 未登录
    if (!currentUser?.id) {
      Modal.confirm({
        title: '出错了',
        icon: <ExclamationCircleOutlined />,
        content: (
          <>
            <p>请登录后前往个人中心完善简历后再投递。</p>
            <p>点击确认，前去登录。</p>
          </>
        ),
        okText: '确认',
        cancelText: '取消',
        onOk: () => history.push(loginPath),
      });
      // 登录了但未完善简历
    } else if (currentUser?.valid !== true) {
      Modal.confirm({
        title: '出错了',
        icon: <ExclamationCircleOutlined />,
        content: (
          <>
            <p>请先前往个人中心完善简历后再投递。</p>
            <p>点击确认，前去完善简历。</p>
          </>
        ),
        okText: '确认',
        cancelText: '取消',
        onOk: () => history.push(accountPath),
      });
      // 完善了简历
    } else if (currentUser?.valid === true) {
      await insertUsingPOST({ postId: postId, userId: currentUser.id, status: 0 })
        .then(() => {
          Modal.success({
            title: '投递成功',
            content: (
              <>
                <p>恭喜你投递成功</p>
                <p>请静候佳音</p>
              </>
            ),
          });
        })
        .catch(() => {
          Modal.error({
            title: '投递失败，您已投递过其他岗位！',
          });
        });
    }
  };

  const action = (
    <RouteContext.Consumer>
      {({ isMobile }) => {
        if (isMobile) {
          return (
            <Button type="primary" onClick={onSend}>
              {<UploadOutlined />}申请岗位
            </Button>
          );
        }
        return (
          <Fragment>
            <Button type="primary" onClick={onSend}>
              {<UploadOutlined />}申请岗位
            </Button>
          </Fragment>
        );
      }}
    </RouteContext.Consumer>
  );

  const description = (
    <RouteContext.Consumer>
      {({ isMobile }) => (
        <Descriptions
          bordered
          className={styles.headerList}
          size="middle"
          column={isMobile ? 1 : 2}
        >
          <Descriptions.Item label="学历要求">{data?.education}</Descriptions.Item>
          <Descriptions.Item label="学位要求">{data?.degree}</Descriptions.Item>
          <Descriptions.Item label="所属院部">{data?.college}</Descriptions.Item>
          <Descriptions.Item label="招聘人数">招{data?.number}人</Descriptions.Item>
          <Descriptions.Item label="招聘时间">
            {moment(data?.startTime).format('YYYY-MM-DD')}-
            {moment(data?.deadline).format('YYYY-MM-DD')}
          </Descriptions.Item>
          <Descriptions.Item label="工作地点">xx学院</Descriptions.Item>
        </Descriptions>
      )}
    </RouteContext.Consumer>
  );

  return (
    <PageContainer
      header={{
        title: data?.name,
        breadcrumb: {},
      }}
      extra={action}
      className={styles.pageHeader}
      content={description}
      extraContent={'注：每人仅限投递一个岗位'}
      loading={loading}
    >
      <Divider style={{ marginBottom: 12 }} />
      <Card bordered={false}>
        <Descriptions title="岗位描述:" style={{ marginBottom: 32, whiteSpace: 'pre-wrap' }}>
          <Descriptions.Item>{data?.description}</Descriptions.Item>
        </Descriptions>
        <Divider style={{ marginBottom: 32 }} />
        <Descriptions title="岗位要求:" style={{ marginBottom: 32, whiteSpace: 'pre-wrap' }}>
          <Descriptions.Item>{data?.require}</Descriptions.Item>
        </Descriptions>
        <Divider style={{ marginBottom: 32 }} />
      </Card>
    </PageContainer>
  );
};

export default PostDetail;
